import React, { Component } from 'react';
import { List,Scroller } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import thunk from 'redux-thunk';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware  } from 'redux';
import fetch from 'isomorphic-fetch';
import './index.scss';


// const fetchReducer =(state={},action={})=>{
// 	const{type,payload} = action;
// 	switch(type){
// 		case 'FETCH_DATA_START':
// 			return Object.assign({},state,{status:'数据请求中...'});
// 		case 'FETCH_DATA_FINISH':
// 			return Object.assign({},state,{status:'数据请求完成',list:payload});
// 		default:
// 			return state;
// 	}
// }
// const store = createStore(fetchReducer,applyMiddleware(thunk));


var Detail = React.createClass({
	getInitialState(){
		return{
			list:[{aa:"aa"}]
		}
	},
	
	componentWillMount(){
		var self =this;
		fetch('../mock/project.json')
			.then(function (response) {
				return response.json()
			})
			.then(function (json) {
				self.setState({
					list:json
				})
			})
	},
	
    render() {
		var data = this.state.list.map(function (val,index) {
			
			return  (
					<div className="yo-card" key={index}>
						
						<div className="extra">
							<img className="img-cover" src={val.image}/>
							<div className="img-desc">
								<p className="desc" style={{position: "absolute",
									bottom:0,
									background:"rgba(0,0,0,0.5)",
									width:"100%",
									height:"30px",
									fontSize:"14px",
									lineHeight:"30px"}}>{val.title}</p>
							</div>
						</div>
						<div className="bd">
							
							<p style={{fontWeight:900,marginTop:"5px"}}>项目名称: {val.name}</p>
							 
							<p style={{marginTop:"5px"}}>项目类型: {val.category}</p>
							项目描述: <br/>
							<p style={{marginTop:"5px"}}> {val.description}</p>
							项目细节:  <br/>
							<p style={{marginTop:"5px"}}>{val.detail}</p>
						</div>
						<div className="ft">
							项目网址:
							<a className="link" href={val.url}>{val.url}</a>
						</div>
					</div>
			)
		})
		return (
			<div className='yo-flex'>
				<Header title="个人项目" />
					<div className='flex'>
						{data}
					</div>
				
			</div>
        )
    }
})



export default Detail;
